<template>
  <div>
    <div class="approve-title">{{ title }}</div>
    <div class="approve-sn">流水号：{{ flowSn }}</div>
    <component ref="component" :is="formComp" :approve-result-options="approveResultOptions" @done="handleDone"></component>

    <el-divider content-position="left"><span class="flow-title">签核</span></el-divider>
    <el-form ref="approveForm" :model="approveForm" :rules="rules" :label-width="width">
      <el-form-item label="是否同意" prop="approveResult">
        <el-radio-group v-model="approveForm.approveResult">
          <el-radio
            v-for="dict in approveResultOptions"
            :key="dict.dictValue"
            :label="dict.dictValue">
            {{dict.dictLabel}}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="我的意见" prop="approveIdea">
        <el-input type="textarea" v-model="approveForm.approveIdea" placeholder="请输入意见"></el-input>
      </el-form-item>
      <el-form-item label="附件" prop="attachments">
        <file-upload ref="upload" v-model="approveForm.attachments"></file-upload>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button type="primary" :loading="submitting" @click="submitForm()">签 核</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </div>
</template>

<script>
import { flowInfo, approve } from "@/api/flow/flow";
import flowViews from "@/router/flowViews";

import LoadError from './loadError';
import FileList from "@/components/FileUpload/FileList";
import {loadView} from "@/utils/routerUtil";

export default {
  name: "Approve",
  components: {
    FileList
  },
  data() {
    return {
      width: '140px',
      flowId: undefined,
      loading: false,
      submitting: false,
      formComp: undefined,
      title: undefined,
      flowSn: undefined,
      approveResultOptions: [],
      approveForm: {
        orders: undefined,
        approveResult: undefined,
        approveIdea: undefined,
        attachments: []
      },
      rules: {
        approveResult: [
          { required: true, message: "是否同意不能为空", trigger: "blur" }
        ],
        approveIdea: [
          { required: true, message: "我的意见不能为空", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    init(flowId, orders) {
      this.setWidth();
      this.flowId = flowId;
      this.approveForm.orders = orders;

      flowInfo(flowId).then(res => {
        this.title = res.title;
        this.flowSn = res.flowSn;

        const mainTable = res.mainTable;
        const flowView = flowViews[mainTable];
        if (flowView) {
          this.formComp = flowView;
        } else {
          console.error("表单加载失败，对应表：" + mainTable);
          this.formComp = LoadError;
        }
      });
      this.getDicts("flow_approve_result").then(response => {
        this.approveResultOptions = response;
      });
    },
    handleDone() {
      this.$refs.component.init(null, this.flowId);
    },
    submitForm() {
      this.$refs["approveForm"].validate(valid => {
        if (valid) {
          this.submitting = true;
          approve(this.flowId, this.approveForm).then(() => {
            this.submitting = false;

            this.msgSuccess("签核成功");
            this.$emit('success');
          }).catch(() => {
            this.submitting = false;
          });
        }
      });
    },
    close() {
      this.$emit('close');
    },
    reset() {
      this.flowId = undefined;
      this.formComp = undefined;
      this.title = undefined;
      this.flowSn = undefined;
      this.approveForm = {
        orders: undefined,
        approveResult: undefined,
        approveIdea: undefined,
        attachments: []
      }

      if (this.$refs.component && this.$refs.component.reset) {
        this.$refs.component.reset();
      }
    },
    setWidth() {
      const width = document.body.clientWidth;
      if (width <= 500) {
        this.width = "110px";
      } else {
        this.width = "140px";
      }
    }
  }
}
</script>

<style scoped lang="scss">
.approve-title {
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 6px;
}
.approve-sn {
  text-align: right;
}

@media only screen and (max-width: 500px) {
  .approve-sn {
    text-align: center !important;
  }
}

.dialog-footer {
  padding-top: 10px;
  text-align: right;
}
</style>
